<template>
  <el-card
    class="base-card"
    shadow="never"
    :body-style="{ padding: '0px' }"
    style="border: none; flex-grow: 1"
  >
    <el-row style="height: calc(100%)">
      <el-scrollbar style="width: 100%; height: 100%">
        <el-col :span="24" style="padding: 0 16px">
          <div class="widget-group">
            <div class="group-title">辅助组件</div>
            <div class="group-widget-list">
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.hline">
                <div class="icon" title="横线">
                  <i class="online-icon icon-divider" />
                </div>
                <div class="name">横线</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.vline">
                <div class="icon" title="竖线" style="transform: rotate(90deg)">
                  <i class="online-icon icon-divider" />
                </div>
                <div class="name">竖线</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.rect">
                <div class="icon" title="矩形">
                  <i class="online-icon icon-checkbox" />
                </div>
                <div class="name">矩形</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.oval">
                <div class="icon" title="椭圆">
                  <i class="online-icon icon-ellipse" />
                </div>
                <div class="name">椭圆</div>
              </div>
              <div style="width: 64px" />
            </div>
            <div class="group-title">基础组件</div>
            <div class="group-widget-list">
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.text">
                <div class="icon" title="文本">
                  <i class="online-icon icon-input" />
                </div>
                <div class="name">文本</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.longText">
                <div class="icon" title="长文本">
                  <i class="online-icon icon-text" />
                </div>
                <div class="name">长文本</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.image">
                <div class="icon" title="图片">
                  <i class="online-icon icon-image" />
                </div>
                <div class="name">图片</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.emptyTable">
                <div class="icon" title="表格">
                  <i class="online-icon icon-table" />
                </div>
                <div class="name">表格</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.barcode">
                <div class="icon" title="条形码">
                  <i class="online-icon icon-barcode" />
                </div>
                <div class="name">条形码</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.qrcode">
                <div class="icon" title="二维码">
                  <i class="online-icon icon-qrcode" />
                </div>
                <div class="name">二维码</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.customText">
                <div class="icon" title="自定义文本">
                  <i class="online-icon icon-custom-text" />
                </div>
                <div class="name">自定义文本</div>
              </div>
              <div style="width: 64px" />
            </div>
            <div class="group-title">系统组件</div>
            <div class="group-widget-list">
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.printTime">
                <div class="icon" title="打印时间">
                  <i class="online-icon icon-print-time" />
                </div>
                <div class="name">打印时间</div>
              </div>
              <div class="group-widget-item ep-draggable-item" tid="defaultModule.printOperator">
                <div class="icon" title="打印人员">
                  <i class="online-icon icon-print-person" />
                </div>
                <div class="name">打印人员</div>
              </div>
              <div style="width: 64px" />
            </div>
          </div>
        </el-col>
      </el-scrollbar>
    </el-row>
  </el-card>
</template>

<script setup>
import { hiprint } from '../index.js';
import provider from './providers.js';
import $ from 'jquery';

onMounted(() => {
  const Provider = provider(hiprint);
  hiprint.init({
    providers: [new Provider()],
  });
  hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
});
</script>

<style lang="scss">
// 拖拽时显示的图片
.hiprint-printElement-image-content {
  img {
    content: url('@/assets/img/hiprint-default.png');
  }
}
</style>

<style lang="scss" scoped>
.widget-group {
  .group-title {
    height: 44px !important;
    color: #333 !important;
    font-weight: bold !important;
    line-height: 44px !important;
  }
  .group-widget-list {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    gap: 8px;

    .group-widget-item {
      margin-bottom: 10px;
      .icon {
        width: 80px;
        height: 80px;
        font-size: 32px;
        text-align: center;
        color: #666;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        cursor: pointer;
        line-height: 80px;
      }

      .icon:hover {
        background: #f6f7f9;
      }

      .name {
        overflow: hidden;
        width: 80px;
        height: 26px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666;
        line-height: 26px;
        font-weight: 400;
      }
    }
  }
}
</style>
